<script setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const formInline = reactive({
	name: '',
	status: '',
	time: '',
	lastTime: '',
	lostTime: '',
	addTime: '',
	addStaffTime: '',
	exitGroupTime: '',
	staff: []
})
const queryNmme = ref('')
const minNum = ref('')
const maxNum = ref('')
const staffList = ref([
	{
		name: '夏小飞',
		avatar: 'https://wework.qpic.cn/wwpic/186339_3kO_N4tbShSL3lF_1665369145/0',
		id: 1
	}
])
const ruleFormRef = ref(null)
const props = defineProps({
	tableData: Array,
	dataSort: Number,
	activeKey: Number
})
const emits = defineEmits(['showModel'])
const resetForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
}
const addDay = () => {
	if (maxNum.value === '') {
		ElMessage({
			message: '请输入最大天数',
			type: 'warning'
		})
	} else if (minNum.value === '') {
		ElMessage({
			message: '请输入最小天数',
			type: 'warning'
		})
	} else {
		formInline.addStaffTime = minNum.value + '~' + maxNum.value
	}
}
</script>
<template>
	<div class="filter-box">
		<div class="header">
			<div v-if="props.dataSort === 0">
				<el-form
					label-position="right"
					ref="ruleFormRef"
					:inline="true"
					:model="formInline"
					class="align-side"
					style="flex-wrap: wrap"
				>
					<el-form-item v-show="props.activeKey === 3" label="上次对话时间：" prop="lastTime">
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.lastTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item label="客户昵称：" :style="{ marginLeft: props.activeKey === 2 ? '28px' : '0' }" prop="name">
						<el-input
							v-model="formInline.name"
							class="w-50 m-2 table-input"
							placeholder="请输入客户昵称"
							:suffix-icon="Search"
						/>
					</el-form-item>
					<el-form-item v-show="props.activeKey === 2" label="流失时间：" prop="lostTime">
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.lostTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item v-show="props.activeKey === 2" label="添加时间：" style="margin-right: 0px" prop="addTime">
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.addTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item v-show="props.activeKey === 2" label="添加员工时长：" prop="addStaffTime">
						<el-select
							clearable
							style="width: 220px; height: 36px"
							v-model="formInline.addStaffTime"
							placeholder="请输入天数范围"
						>
							<template #empty>
								<p class="input-text">请输入天数范围</p>
								<div class="select-day">
									<el-input-number v-model="minNum" class="mx-4" :max="999" controls-position="right" />
									~
									<el-input-number v-model="maxNum" class="mx-4" :max="999" controls-position="right" />
									<div class="select-btn">
										<el-button @click="addDay" type="primary">确定</el-button>
									</div>
								</div>
							</template>
						</el-select>
					</el-form-item>
					<el-form-item
						style="margin-left: -210px"
						v-show="props.activeKey === 2"
						label="退群时间："
						prop="exitGroupTime"
					>
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.exitGroupTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item v-show="props.activeKey === 1" label="流失状态：" prop="status">
						<el-select style="width: 220px; height: 36px" v-model="formInline.status" placeholder="请选择流失状态">
							<el-option label="已流失" :value="1" />
							<el-option label="未流失" :value="0" />
						</el-select>
					</el-form-item>
					<el-form-item
						label="添加时间："
						style="margin-right: 0px"
						v-show="props.activeKey === 1 || props.activeKey === 3"
						prop="time"
					>
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.time"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item style="margin-right: 0">
						<el-button class="table-btn" @click="resetForm(ruleFormRef)">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div v-else>
				<el-form
					label-position="right"
					ref="ruleFormRef"
					:inline="true"
					:model="formInline"
					class="align-side"
					style="flex-wrap: wrap"
				>
					<el-form-item label="客户昵称：" :style="{ marginLeft: props.activeKey === 3 ? '28px' : '0' }" prop="name">
						<el-input
							v-model="formInline.name"
							class="w-50 m-2 table-input"
							placeholder="请输入客户昵称"
							:suffix-icon="Search"
						/>
					</el-form-item>
					<el-form-item label="所属客服：" prop="staff">
						<el-select multiple v-model="formInline.staff" style="width: 220px; height: 36px" placeholder="请选择员工">
							<div class="select-title">全部员工 ({{ staffList.length }})</div>
							<div class="search-box">
								<el-input
									style="width: 100%"
									v-model="queryNmme"
									class="w-50 m-2"
									placeholder="请输入员工名称"
									:suffix-icon="Search"
								/>
							</div>

							<el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id">
								<div class="staff-item">
									<img class="avatar-img" :src="item.avatar" alt="" />
									<span class="name">{{ item.name }}</span>
								</div>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item
						v-show="props.activeKey === 2 || props.activeKey === 3"
						label="添加时间："
						style="margin-right: 0px"
						prop="addTime"
					>
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.addTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item v-show="props.activeKey === 2" label="添加员工时长：" prop="addStaffTime">
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.addStaffTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<!-- <el-form-item
						style="margin-left: -210px"
						v-show="props.activeKey === 2"
						label="退群时间："
						prop="exitGroupTime"
					>
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.exitGroupTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item> -->
					<el-form-item v-show="props.activeKey === 1" label="流失状态：" prop="status">
						<el-select style="width: 220px; height: 36px" v-model="formInline.status" placeholder="请选择流失状态">
							<el-option label="已流失" :value="1" />
							<el-option label="未流失" :value="0" />
						</el-select>
					</el-form-item>
					<!-- <el-form-item
						label="添加时间："
						style="margin-right: 0px"
						v-show="props.activeKey === 2 || props.activeKey === 3"
						prop="time"
					>
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.time"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item> -->
					<el-form-item v-show="props.activeKey === 2" style="margin-left: -207px" label="流失时间：" prop="lostTime">
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.lostTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item v-show="props.activeKey === 3" label="上次对话时间：" prop="lastTime">
						<el-date-picker
							style="width: 220px; height: 36px"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
							v-model="formInline.lastTime"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
					</el-form-item>
					<el-form-item style="margin-right: 0">
						<el-button class="table-btn" @click="resetForm(ruleFormRef)">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="table-wrap">
			<div class="header-warp align-side">
				<strong>共0个客户</strong>
				<el-button class="table-btn" type="primary" :disabled="props.tableData" plain>导出Excel</el-button>
			</div>
			<el-table v-if="props.dataSort === 0" border :data="props.tableData" style="width: 100%">
				<!-- <el-table-column v-if="tableFrom.dataSort === 1" prop="ctime" label="日期" sortable width="180" />
				<el-table-column v-else label="员工" width="180">
					<template #default="scope">
						<div class="flex-row" style="align-items: flex-start">
							<img class="avatar-img" :src="scope.row.avatar" alt="" />
							<p style="font-size: 13px; color: #222222d9; margin-top: -5px">{{ scope.row.creator_name }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column v-if="tableFrom.dataSort === 0" prop="ranking" sortable>
					<template #header>
						当前排名
						<el-tooltip class="box-item" effect="light" placement="top">
							<template #content>
								<p style="font-size: 14px; color: rgba(0, 0, 0, 0.65)">根据员工推广「净增客户数」排名</p>
							</template>
							<MyIcon name="Question"
						/></el-tooltip>
					</template>
				</el-table-column> -->
				<el-table-column prop="ranking" label="客户昵称" />
				<el-table-column prop="ranking" label="标签" />
				<el-table-column prop="ranking" v-if="props.activeKey === 2" label="流失时间" />
				<el-table-column prop="ranking" label="添加时间" />
				<el-table-column prop="ranking" v-if="props.activeKey === 1" label="流失状态" />
				<el-table-column prop="ranking" v-if="props.activeKey === 2" label="添加员工时长" />
				<el-table-column prop="ranking" v-if="props.activeKey === 3" label="上次对话时间" />
				<el-table-column label="操作" fixed="right" align="right">
					<template #default="scope">
						<span @click="toDetails(scope.row)" style="color: #1890ff">查看详情</span>
					</template>
				</el-table-column>
				<template #empty>
					<div class="table-null">
						<div class="table-null-box">
							<img style="margin: 0" src="../../../../assets/img/img/list-empty.499dbb25961c.png" />
							<p>还没有相关的数据哦～</p>
						</div>
					</div>
				</template>
			</el-table>
			<el-table v-else border :data="props.tableData" style="width: 100%">
				<el-table-column prop="ranking" label="客户昵称" />
				<el-table-column prop="ranking" label="所属客服" />
				<el-table-column prop="ranking" label="标签" />
				<el-table-column prop="ranking" v-if="props.activeKey !== 1" label="添加时间" />
				<el-table-column prop="ranking" v-if="props.activeKey === 1" label="流失状态" />
				<el-table-column prop="ranking" v-if="props.activeKey === 2" label="添加员工时长" />
				<el-table-column prop="ranking" v-if="props.activeKey === 3" label="上次对话时间" />
				<el-table-column prop="ranking" v-if="props.activeKey === 2" label="流失时间" />
				<el-table-column label="操作" fixed="right" align="right">
					<template #default="scope">
						<span @click="toDetails(scope.row)" style="color: #1890ff">查看详情</span>
					</template>
				</el-table-column>
				<template #empty>
					<div class="table-null">
						<div class="table-null-box">
							<img style="margin: 0" src="../../../../assets/img/img/list-empty.499dbb25961c.png" />
							<p>还没有相关的数据哦～</p>
						</div>
					</div>
				</template>
			</el-table>
		</div>
	</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/groupManagement/codeCommon.scss';
.name {
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
}
.avatar-img {
	width: 30px;
	height: 30px;
	border-radius: 4px;
	margin-right: 10px;
}
.select-title {
	width: 300px;
	padding: 0 20px;
	margin-bottom: 10px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
}
.search-box {
	padding: 0 20px;
	margin-bottom: 6px;
}
.input-text {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
	padding: 12px 16px;
}
.select-btn {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 20px 0px;
}
.select-day {
	padding: 6px 16px;
}
.table-input {
	width: 220px;
	height: 36px;
}
.table-btn {
	width: 92px;
	height: 36px;
}
.text-blue {
	color: #1890ff;
}
.filter-box {
	width: 100%;
}
.header-warp {
	margin-top: 24px;
	margin-bottom: 16px;
}
</style>
